<template lang="">
  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="商品名字" required>
      <el-input v-model="form.proname" maxlength="50" clearable />
    </el-form-item>

    <el-form-item label="商品价格" required>
      <el-input v-model.number="form.originprice" type="number" />
    </el-form-item>

    <el-form-item label="商品详情" required>
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>

    <el-form-item label="是否在售" required>
      <el-switch v-model="form.issale" :active-value="1" :inactive-value="0" />
    </el-form-item>

    <el-form-item label="上传图片">
      <!-- 上传图片组件 -->
      <!-- v-model:file-list 图片数组 -->
      <!-- action 上传图片接口 -->
      <!-- list-type  图片墙类型 -->
      <!-- on-preview 预览事件 -->
      <!-- on-remove 删除事件 -->
      <el-upload
        v-model:file-list="fileList"
        action="http://localhost:3001/admin/file/upload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :limit="4"
        name="img"
        :on-success="uploadSuccess"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>

      <!-- 预览图片 -->
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="预览图片" />
      </el-dialog>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">发布</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
/*
1-创建空页面组件
2-menu.js 配置路由
3-参照接口文档---请求函数  api.proudct.js
4-页面组件使用接口--完善页面
*/
import { productAddReq } from "@/api/product"
import { ElMessage } from "element-plus"
export default {
  data() {
    return {
      //图片预览控制
      dialogVisible: false,
      dialogImageUrl: "",

      //上传图片数组
      // 数组中数据 格式是固定-参照文档
      fileList: [
      ],

      // 表单数据
      form: {
        prorname: "",
        originprice: 0,
        desc: "",
        brand: "",
        img1: "",
        img2: "",
        img3: "",
        img4: "",
        issale: 1
      }
    }
  },
  methods: {
    handlePictureCardPreview(item) {
      this.dialogImageUrl = item.url
      this.dialogVisible = true
      console.log(item)
    },
    handleRemove() {
      console.log(this.fileList);
    },
    //上传图片成功的回调
    uploadSuccess(e) {
      // 服务器返回的数据
      console.log(e)
      console.log(this.fileList)
    },

    async onSubmit() {
      console.log(this.form) //

      // 接口 要图片地址 img1  img2  img3  img4
      // this.fileList  = [{response:{file_url}}]
      this.fileList.forEach((v, i) => {
        console.log(v.response.fileUrl, i)
        this.form["img" + (i + 1)] = v.response.fileUrl
      })

      let r = await productAddReq(this.form)
      console.log(r)
      if (r.data.code == 200) {
        ElMessage({
          type: "success",
          message: r.data.message
        })
      } else {
        ElMessage({
          type: "error",
          message: r.data.message
        })
      }
    }
  }
}
</script>
<style lang=""></style>
